<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_事件处理</title>
</head>
<body>
<!--
1. 绑定监听：
 v-on:xxx="fun"
 @xxx="fun"
 @xxx="fun(参数)"
 默认事件形参： event
 隐含属性对象:$event
 2.事件修饰符：
  .prevent :阻止事件的默认行为 event.preventDefault()
  .stop :停止事件冒泡 event.stopPropagation()
 3.按键修饰符
 .keycode :操作的是某个keycode值得键
 .enter :操作的是enter键
-->
<div id="example">
    <h2>1.绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('aaaa')">test2</button>
    <button @click="test3">test3</button>
    <button @click="test4('aa',$event)">test4</button>
    <h2>2.事件修饰符</h2>
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6">
        </div>
    </div>
    <a href="www.baidu.com" @click.prevent="test7">去百度</a>
    <h2>3.按键修饰符</h2>
    <input type="text" @keyup="test8">
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm =new Vue({
        el:'#example',
        data:{
            test1(){
                alert("test1")
            },
            test2(msg){
                alert(msg)
            }
            ,test3(evnet){
                alert(event.target.innerHTML)
            }
            ,test4(number,evnet){
                alert(number)
                alert(event.target.innerHTML)
            }
            ,test5(){
                alert("out")
            }
            ,test6(){//停止事件冒泡
                alert("inner")
            }
            ,test7(){
                alert("点击了去百度")
            }
            ,test8(event){
                if(event.keyCode==13){
                alert(event.target.value)
                }
            }
        }
    })

</script>
</body>
</html>